<style scoped>
.car-record-list {
	min-height: 100vh;
	box-sizing: border-box;
	color: #333;
	background-color: #F4F4F4;
}
.content {
	padding-top: .32rem;
}
.content.bg {
	background-color: #FFF;
}
.title {
	margin: 0 .3rem;
	font-size: .44rem;
	font-weight: 600;
}
.tips {
	margin-top: .32rem;
	padding: 0 0 .16rem .3rem;
	color: #666;
	font-size: .24rem;
	border-bottom: 1px solid #DEDEDE;
}
.car-wrapper {
	background-color: #FFF;
}
.car-item {
	display: flex;
	align-items: center;
	height: 1.17rem;
	padding: 0 .3rem;
	position: relative;
	box-sizing: border-box;
	font-size: .3rem;

	&::before {
		content: "";
		width: .44rem;
		height: .44rem;
		margin-right: .1rem;
		background: url(~@/assets/car-record/car.png);
		background-size: 100% 100%;
	}

	&::after {
		content: "";
		height: 1px;
		position: absolute;
		bottom: 0;
		left: .3rem;
		right: .3rem;
		background-color: #DEDEDE;
	}
}
.car-item:active {
	background-color: rgba(0, 0, 0, .06);
}
.car-item.actived::before {
	background-image: url(~@/assets/car-record/car-actived.png);
}
.no-more {
	display: block;
	padding-top: .28rem;
	color: #B6B6B6;
	text-align: center;
	font-size: .22rem;
	background-color: #F4F4F4;
}
</style>

<template>
	<div class="car-record-list">
		<div class="content" :class="{bg: contentBg}">
			<h1 class="title">切换车辆</h1>

			<infinite :url="currentURL" :params="currentParams" :isDisabledFirstLoad="isDisabledFirstLoad" countName="totalCount" @complete="handleComplete">
				<template v-slot:card="{dataList, response: {total}}">
					<p class="tips">我关联的车辆 （{{total}}）</p>

					<div class="car-wrapper">
						<span class="car-item" v-for="item of dataList">{{item.carNumber}}</span>
					</div>

					<span class="no-more">没有更多车辆了 ~</span>
				</template>

				<template v-slot:no-data>
					<no-data tips="您还没有相关任务" />
				</template>
			</infinite>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				contentBg: false,

				currentURL: '/api/list',
				currentParams: {},
				isDisabledFirstLoad: false
			}
		},

		created() {

		},

		methods: {
			startTimer() {
				setTimeout(() => {
					this.hiddenToast()
				}, this.duration)
			},
			hiddenToast() {
				this.isVisible = false
			},
			handleComplete() {
				this.contentBg = true
			}
		}
	}
</script>